<template>
	<view class="poRel" style="background-color: #F6F6F6;min-height: 100vh;">
		<view class="wid100 poAbs" style="height: 775rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">订单详情</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
		<view class="poRel mar-top30" style="z-index: 2;">
			<view class="dis disAl disJuC fowe800 foSi50" style="height: 160rpx;">{{orderState.str1}}</view>
			<view class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
				<view class="wid90 mar">
					<view class="fowe800 f32 dis disAl" style="border-bottom: 1rpx dashed #E3D4D4;height: 74rpx;">已点商品</view>
					<block v-for="(v,i) in info.goodsArr" :key="i">
						<view class="dis mar-top20">
							<view class="wid25" style="height: 132rpx;">
								<image :src="v.icon" class="borRad20 hei100" style="width: 132rpx;"></image>
							</view>
							<view style="width: 75%;">
								<view style="height: 10rpx;"></view>
								<view class="dis disJuB">
									<view class="wid70 f28 fowe800 webkitLineClamp" style="line-height: 36rpx;height: 72rpx;">{{v.name}}</view>
									<view class="f24" style="color: #737373;">x{{v.num}}</view>
								</view>
								<view class="f24 mar-top20" :style='{color:tColor}' style="text-align: right;">{{sl+v.money}}</view>
							</view>
						</view>
					</block>
					<view style="height: 30rpx;"></view>
				</view>
			</view>
			<view class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
				<view class="wid90 mar">
					<view class="dis disAl disJuB mar-top20 f28 fowe800" style="height: 74rpx;">
						<view style="color: #737373;">桌位费</view>
						<view >{{sl}}0.00</view>
					</view>
					<view class="dis disAl disJuB" style="height: 82rpx;">
						<view></view>
						<view class="dis disAl f24">
							<view class="mar-right20" style="color: #737373;">共{{info.num}}件商品</view>
							<view class="mar-right20">小计</view>
							<view class="f28">{{sl+info.money}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
				<view class="wid90 mar f24 fowe600" style="padding: 30rpx 0;">
					<view class="dis disAl disJuB">
						<view style="color: #737373;">商家信息</view>
						<view style="color: #737373;">{{info.storeName}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #737373;">桌号</view>
						<view style="color: #737373;">{{info.typeName+info.number}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #737373;">人数</view>
						<view style="color: #737373;">{{info.people}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #737373;">结算模式</view>
						<view style="color: #737373;">餐前结算</view>
					</view>
				</view>
			</view>
			<view v-if="info.state>1" class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
				<view class="wid90 mar">
					<view class="fowe800 f32 dis disAl" style="border-bottom: 1rpx dashed #E3D4D4;height: 74rpx;">订单信息</view>
					<view class="dis disAl disJuB mar-top20 f24">
						<view style="color: #737373;">订单编号</view>
						<view class="dis disAl">
							<view class="mar-right10">{{info.outTradeNo}}</view>
							<view @tab='util.fz(info.outTradeNo)' class="dis disAl disJuC f22" style="width: 56rpx;height: 29rpx;border: 1rpx solid #737373;color: #737373;">复制</view>
						</view>
					</view>
					<view class="dis disAl disJuB mar-top20 f24">
						<view style="color: #737373;">下单时间</view>
						<view>{{timeToDate(info.createdAt)}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20 f24">
						<view style="color: #737373;">支付方式</view>
						<view class="fowe600">{{payName(info.payMode)}}</view>
					</view>
					<view style="height: 30rpx;"></view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import utils from '@/common/utils.js'
	import bkB from '@/components/common/block-b.vue'
	import MgCell from '@/components/common/mg-cell.vue'
	export default {
		name: 'order-dl',
		components: {
			bkB,
			MgCell,
		},
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				info: {},
				stime: '',
				latitude: '',
				longitude: '',
				covers: [],
				line: [],
				sjxx: {},
				loading: false,
			}
		},
		async onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getSystem({
				setNB: 1
			})
			this.util.setNT('订单详情')
			this.orderId = options.id
			this.getInfo()
		},
		mixins: [utilMixins],
		computed: {
			orderState() {
				let str1 = '',
					str2 = '',
					str3 = ''
				switch (+this.info.state) {
					case 2:
						str1 = '订单已完成'
						str2 = ''
						break;
				}
				return {
					str1,
					str2,
					str3,
				}
			},
			osl() {
				return this.info.symbol || this.sl
			},
			zyh() {
				return +this.info.vipDiscountMoney + (+this.info.couponPreferential)
			},
		},
		methods: {
			fanhui() {
				uni.navigateBack(1)
			},
			async getInfo() {
				let {
					data
				} = await this.util.request({
					'url': this.api.dmxq,
					mask: '加载中',
					data: {
						orderId: this.orderId,
						id: this.orderId
					},
				})
				if (data) {
					this.info = data
					// this.getStoreInfo(data.storeId)
				}
			},
			async getStoreInfo(id) {
				let {
					data
				} = await this.util.request({
					'url': this.api.StoreInfo,
					data: {
						storeId: id,
						item: 2,
						userId: this.uId,
					},
				})
				this.sjxx = data
			},
		},
	}
</script>

<style scoped lang="scss">
	.sltop {
		height: 206rpx;
	}

	.slbd {
		margin-top: -80rpx;
	}

	.slbdt1 {
		padding: 50rpx 30rpx;
	}
</style>
